<template>

    <div class="panel-style panel-box">
        <el-row :gutter="20" class="pad-t-15">
            <el-col :span="8">
                <div class="flex v-align-c border bar-show">
                    <svg-icon class="icon-layer bar-icon mar-r-10" icon-class="category"/>
                    <div class="flex-item align-c">
                        <div class="font-26 pad-b-10">{{upStatusGoods}}</div>
                        <div class="font-14 flex-item">上架中商品</div>
                    </div>
                </div>
            </el-col>

            <el-col :span="8">
                <div class="flex v-align-c border bar-show">
                    <svg-icon class="icon-layer bar-icon one-icon mar-r-10" icon-class="box"/>
                    <div class="flex-item align-c">
                        <div class="font-26 pad-b-10">{{emptyGoods}}</div>
                        <div class="font-14 flex-item">已售空商品</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="flex v-align-c border bar-show">
                    <svg-icon class="icon-layer bar-icon two-icon mar-r-10" icon-class="warehouse"/>
                    <div class="flex-item align-c">
                        <div class="font-26 pad-b-10">{{downStatusGoods}}</div>
                        <div class="font-14 flex-item">仓库中商品</div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="pad-t-30">
            <el-col :span="8">
                <div class="flex v-align-c border bar-show">
                    <svg-icon class="icon-layer bar-icon" icon-class="userMore"/>
                    <div class="flex-item align-c">
                        <div class="font-26 pad-b-10">{{memberTotal}}</div>
                        <div class="font-14 flex-item">分销微客总数</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="flex v-align-c border bar-show">
                    <svg-icon class="icon-layer bar-icon two-icon" icon-class="order"/>
                    <div class="flex-item align-c">
                        <div class="font-26 pad-b-10">{{orderTotal}}</div>
                        <div class="font-14 flex-item">分销订单总数</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="flex v-align-c border bar-show">
                    <svg-icon class="icon-layer bar-icon two-icon" icon-class="delivery"/>
                    <div class="flex-item align-c">
                        <div class="font-26 pad-b-10">{{paidOrderTotal}}</div>
                        <div class="font-14 flex-item">待发货订单总数</div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="pad-b-30"></div>
    </div>

</template>

<style lang="scss" scoped>

    .bar-show{
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        padding: 20px 0px 20px 20px;
    }
    .number-panel{
        height: 204px;
        padding-top: 40px;
    }
    .number-orange{
        color: #fe980f;
    }
    .bar-icon{
        font-size: 42px!important;
        &.one-icon{
            font-size: 50px!important;
        }
        &.two-icon{
            font-size: 46px!important;
        }
        &.three-icon{
            font-size: 65px!important;
        }
    }
    .user-avatar {
        width: 46px;
        height: 46px;
        display: block;
        border-radius: 50px;
    }
    .panel-box{
        h2{
            margin: 0;
            padding: 0;
        }
        .more-btn{
            cursor: pointer;
            color: #36a3f7;
        }
    }
    .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
    }
    .panel-style {
        background: #fff;
        padding: 16px 0px 0 20px;
        margin-bottom: 32px;
        &.panel-box{
            padding: 16px 20px 0 20px;
        }
    }

</style>
<script>
  import { statGoodsTotal } from '@/api/goods/goods-statistics'

  export default {
    data() {
      return {
        dateType: '1',
        dataList: [],
        orderNumTotal: 0,
        orderPriceTotal: 0,
        unitPrice: 0,
        listLoading: false,
        upStatusGoods: 0,
        emptyGoods: 0,
        // 下架商品数量
        downStatusGoods: 0,
        // 分销微客总数
        memberTotal: 0,
        orderTotal: 0,
        paidOrderTotal: 0
      }
    },
    // 初始化页面
    created() {
      this.initData()
    },
    methods: {
      initData() {
        const enterpriseId = this.getEnterpriseId()
        const data = {
          enterpriseId: enterpriseId,
          dateType: this.dateType
        }
        this.listLoading = true
        statGoodsTotal(data).then(response => {
          this.upStatusGoods = response.data.upStatusGoods
          this.emptyGoods = response.data.isEmptyGoods
          this.downStatusGoods = response.data.downStatusGoods
          this.memberTotal = response.data.memberTotal
          this.orderTotal = response.data.orderTotal
          this.paidOrderTotal = response.data.paidOrderTotal
          this.listLoading = false
        })
      },
      handleClick() {
        this.initData()
      }
    }
  }
</script>
